<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</head>

<body>
    <input type="checkbox" id="info-button" />
    <label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
    <canvas id="myCanvas"></canvas>
    <div class="slideout-sidebar">
        <img class="info-icon" src="../../assets/images/section_plane_icon.png" />
        <h1>SectionPlanesPlugin</h1>
        <h2>Slices models open to reveal internal structures</h2>
        <p>SectionCaps at distance.</p>
        <h3>Stats</h3>
        <ul>
            <li>
                <div id="time">Loading JavaScript modules...</div>
            </li>
        </ul>
        <h3>Components used</h3>
        <ul>
            <li>
                <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html" target="_other">Viewer</a>
            </li>
            <li>
                <a href="../../docs/class/src/plugins/SectionPlanesPlugin/SectionPlanesPlugin.js~SectionPlanesPlugin.html"
                    target="_other">SectionPlanesPlugin</a>
            </li>
        </ul>
    </div>
</body>

<script type="module">

    // Without the fix introduced for XCD-306 the SectionCaps will render off
    const testOrigin = [10000000.5, -10000000.5, -10000000.5];

    import { buildBoxGeometry, math, PhongMaterial, SceneModel, SectionPlanesPlugin, Texture, Viewer } from "../../dist/xeokit-sdk.min.es.js";

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true,
        readableGeometryEnabled: true
    });

    const cameraControl = viewer.cameraControl;
    cameraControl.navMode = "orbit";
    cameraControl.followPointer = true;

    const sceneModel = new SceneModel(viewer.scene, { isModel: true });

    const box = buildBoxGeometry({ center: testOrigin });

    const boxMesh = sceneModel.createMesh({
        id: "box",
        primitive: "solid",
        indices:   box.indices,
        positions: box.positions,
        uv:        box.uvs,
        color:     [0,1,0]
    });

    sceneModel.createEntity({
        id: boxMesh.id + "_Entity",
        isObject: true,
        meshIds: [ boxMesh.id ]
    });

    sceneModel.finalize();

    const capMaterial = new PhongMaterial(viewer.scene, {
        diffuseMap: new Texture(viewer.scene, {
            flipY: true,
            src: "../../assets/textures/diffuse/uvGrid2.jpg"
        }),
    });
    Object.values(sceneModel.objects).forEach(entity => { entity.capMaterial = capMaterial; });

    const sectionPlanes = new SectionPlanesPlugin(viewer);

    const sectionPlane2 = sectionPlanes.createSectionPlane({
        id: "mySectionPlane2",
        pos: math.addVec3([5,4.7,-5], testOrigin),
        dir: [0.3419620945030424, -0.8758176019282808, -0.3405957340832203]
    });
    sectionPlanes.showControl(sectionPlane2.id);

    const camera = viewer.camera;
    camera.eye  = math.addVec3([-3,3,3], testOrigin);
    camera.look = math.addVec3([0,0,0], testOrigin);
    camera.up   = [0,1,0];

</script>

</html>
